<template>
	<view class="collect_wrapper">
		<view class="collect_list" v-if="collectList.length > 0">
			<view class="collect_item" v-for="item in collectList" :key="item.id">
				<view class="collect_up">
					<view class="picture">
						<img :src="item.imgURL" alt="" :onerror="tabErrorPicture(item.id)" />
					</view>
					<view class="chat_intro">
						<view class="title">{{item.title}}</view>
						<view class="price">￥<text>{{item.price}}</text></view>
						<view class="status">{{item.status}}</view>					
					</view>
				</view>
				<view class="collect_down">
					<button class="contact" @click="GotoPayment(item.id)">去付款</button>
					<button class="evaluate" @click="GotoCollect(item.id)">查看收藏</button>
					<button class="single" @click="cancelCollect(item.id)">取消收藏</button>
				</view>
			</view>
			<view class="noMore">没有更多数据了哦~~</view>
		</view>
		<view class="noData" v-else>
			<i class="iconfont icon-zanwushuju"></i>
			<text class="name">暂无收藏</text>
		</view>
		<u-modal @confirm="confirm" @cancel="cancel" :show="collectLayer.show" :title="collectLayer.title" :content='collectLayer.content' :show-cancel-button="true"></u-modal>
		<u-modal @confirm="confirmPayment" :show="paymentLayer.show" :title="paymentLayer.title" :content='paymentLayer.content'></u-modal>
	</view>
</template>

<script>
	import { api_getMyCollect,api_DeleteMyCollect } from '@/api/api'
	import config from '@/utils/config'
	import * as type from '@/utils/device'
	export default {
		data() {
			return {				
				collectList: [
					// {id: this.nanoid(24),imgURL: '',title: 'test',price: '0.00',status: '已收藏'},
				],
				errorProduct: require('@/static/img/default_image.jpg'), 
				collectLayer: {
					id: null,
					show: false,
					title: '取消收藏',
					content: '你是否真的取消收藏？'
				},
				paymentLayer: {
					show: false,
					title: '温馨提示',
					content: '请在微信客户端打开此页面支付购买'
				}
			}
		},
		computed: {
			device(){
				return type.default;
			},
		},
		onLoad(){
			this.init();
		},
		methods: {
			init(){	// 初始化
				uni.showLoading({ title: '数据加载中...' });
				api_getMyCollect().then(res => {
					let { code,data: {collectlist},msg } = res;
					uni.hideLoading();
					if (code == 1) {
						this.collectList = collectlist;
					} else {
						uni.showToast({ title: msg,icon: 'error' })
					}
				}).catch(err => {
					uni.hideLoading();
					console.log(err);
				})
			},
			tabErrorPicture(id){	// 学习记录列表图片加载失败
				let i = this.collectList.findIndex(v => v.id == id);
				this.collectList[i].imgURL = this.errorProduct;		
			},
			cancelCollect(id){	// 取消收藏
				this.collectLayer.show = true;
				this.collectLayer.id = id;
			},
			GotoCollect(id){	// 查看收藏
				console.log('goto',id);
				uni.navigateTo({ url: `/pages/product/index?id=${id}` });
			},
			GotoPayment(id){	// 去付款
				if (this.device == 'H5') {
					this.paymentLayer.show = true;
				} else {
					console.log('goto pay',id);
					let domainname = uni.getStorageSync('domainname');
					let FrontUrl = window.location.protocol + '//' + window.location.host;
					const nexturl = FrontUrl + `/pages/order/index?id=${id}`;
					let url = config.baseURL + '/user/wxzhifu/getweixinopenid' + `?nexturl=${encodeURIComponent(nexturl)}`;
					window.location.href = url;
				}
			},
			confirm(){	// 弹框确认--取消收藏		
				this.collectLayer.show = false;
				api_DeleteMyCollect({ columnid: this.collectLayer.id }).then(res => {
					uni.showToast({title: res.msg,icon: res.code == 1 ? 'success' : 'error' });
					this.init();
				}).catch(err => console.log(err));
			},
			cancel(){	// 弹框取消--取消收藏
				console.log('cancel');
				this.collectLayer.show = false;
				this.collectLayer.id = null;
			},
			confirmPayment(){
				this.paymentLayer.show = false;
			},
			nanoid(len = 6) {  // 生成随机数
			    if (len <= 11) {
			        return Math.random().toString(36).slice(2,2+len).padEnd(len,'0')   
			    } else {
			        return this.nanoid(11) + this.nanoid(len - 11)   
			    }    
			}
		}
	}
</script>

<style lang="scss" scoped>
.collect_wrapper{
	.collect_list{
		.collect_item{
			padding: 10px 10px 10px 15px;
			box-sizing: border-box;
			background-color: #fafafa;
			margin: 0 0 10px 0;
			.collect_up{
				display: flex;	
				.picture{
					width: 80px;
					height: 80px;
					overflow: hidden;
					img{
						display: block;
						width: 80px;
						height: 80px;
						margin: 0;
					}
				}
				.chat_intro{
					padding: 0 0 0 10px;
					box-sizing: border-box;
					.title{
						font-size: 12px;
					}
					.price{
						font-size: 14px;
						margin: 20px 0 0 0;
					}
					.status{
						font-size: 12px;
					}					
				}
			}
			.collect_down{
				padding: 10px 0 0;
				overflow: hidden;
				button{
					float: right;
					font-size: 12px;
					line-height: 24px;
					background-color: #fff;
					padding: 0 10px;
					margin: 0 0 0 10px;					
				}
				.single,.evaluate{
					color: #1989fa;
					&::after{
						border: 1px solid #1989fa;
					}
				}
				.contact{
					color: #ee0a24;
					border-color: #ee0a24;
					&::after{
						border: 1px solid #ee0a24;
					}
				}
			}
		}
		.noMore{
			font-size: 14px;
			text-align: center;
			color: #ccc;
			margin: 20px 0 0;
		}
	}
	.noData{
		padding: 50px 0 0;
		margin: 0 auto;
		text-align: center;
		.iconfont{
			display: block;
			margin: 0 auto;
			font-size: 100px;
			color: gray;
		}
		.name{
			font-size: 14px;
			color: #999;
		}
	}
}
</style>
